const App = {
    extends: Parent,
    methods: {
        init() {
            this.selectMyUser();

            //页面加载完成后，发送异步请求获取数据
            this.selectAllFriend();
        },
        selectAllFriend() {
            var _this = this;
            //查询关注列表
            axios.get(ParentUrl+"/FriendList/1").then(resp=>{
                console.log(resp.data);
                _this.Result = resp.data;
                //设置表格数据
                _this.userTable = _this.Result.data;
            }).catch(err => {
                console.error(err);
            });
            //查询粉丝列表
            axios.get(ParentUrl+"/FriendList/2").then(resp=>{
                console.log(resp.data);
                _this.Result = resp.data;
                //设置表格数据
                _this.fansTable = _this.Result.data;
            }).catch(err => {
                console.error(err);
            });
            //查询好友列表
            axios.get(ParentUrl+"/FriendList/3").then(resp=>{
                console.log(resp.data);
                _this.Result = resp.data;
                //设置表格数据
                _this.friendTable = _this.Result.data;

                //默认第一位发送消息好友
                _this.chat(_this.friendTable[0]);//开始接受消息
            }).catch(err => {
                console.error(err);
            });
        },//查询好友列表
        deleteFriend(row) {
            this.$confirm('确认删除该好友?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var _this = this;
                axios({
                    method:"delete",
                    url:ParentUrl+"/FriendList/"+row.account
                }).then(resp=>{
                    //设置表格数据
                    _this.Result = resp.data;
                    if(_this.Result.code === 1) {
                        //重新初始化页面
                        _this.init();
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                    }
                    else {
                        this.$message({
                            message: '删除失败！',
                            type: 'warning'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    showClose: true,
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },//删除好友
        send(){
            let text = document.querySelector('#textarea').value;
            if(!text){
                alert('请输入内容');
                return ;
            }
            let time_item = document.createElement('div');
            let item = document.createElement('div');
            time_item.className = 'item item-center';
            item.className = 'item item-right';
            time_item.innerHTML = '<div class="item item-center"><span>'+this.message.time+'</span></div>';
            item.innerHTML = `<div class="bubble bubble-left">${text}</div><div class="avatar"><img style="width="40" height="40"" src="/img/HeadSculpture.jpg"/></div>`;
            document.querySelector('.content').appendChild(time_item);
            document.querySelector('.content').appendChild(item);
            document.querySelector('#textarea').value = '';
            document.querySelector('#textarea').focus();

            //滚动条置底
            let height = document.querySelector('.content').scrollHeight;
            document.querySelector(".content").scrollTop = height;
            //发送消息
            var _this = this;
            axios.post(ParentUrl+"/Chat",_this.message).then(resp=>{
            })
        },//发送消息
        Receive(text, time){
            let time_item = document.createElement('div');
            let item = document.createElement('div');
            time_item.className = 'item item-center';
            item.className = 'item item-left';
            time_item.innerHTML = '<div class="item item-center"><span>'+time+'</span></div>';
            item.innerHTML = '<div class="item item-left"><div class="avatar"><img style="width="40" height="40"" src="/img/HeadSculpture.jpg"/></div><div class="bubble bubble-left">'+text+'</div></div>';
            document.querySelector('.content').appendChild(time_item);
            document.querySelector('.content').appendChild(item);
            //滚动条置底
            let height = document.querySelector('.content').scrollHeight;
            document.querySelector(".content").scrollTop = height;
        },//添加好友消息
        chat(row) {
            //清空上一次的聊天记录
            document.getElementById('content').innerHTML = "";

            console.log(row);
            this.message.receiverAcc = row.account;
            //this.ChatDialog = true;
            //接受消息
            setInterval((_this=this)=>{
                axios.get(ParentUrl+"/Chat/"+row.account).then(resp=>{
                    _this.Result = resp.data;
                    var content = _this.Result.data.content;
                    var time = _this.Result.data.time;
                    if(content!==null) _this.Receive(content,time);
                });
            },2000);
        },//开始聊天并且打开聊天页面
        contentClose() {
            document.getElementById('content').innerHTML = "";
            this.ChatDialog = false;
        }//关闭聊天框
    },
    data() {
        return {
            activeIndex: '2',//标题栏高显位置
            //聊天对话框
            ChatDialog: false,
            //表格数据
            friendTable: [],
            fansTable: [],
            userTable: [],
            insertFriendAccount:'',//被添加好友的账号
            message: {
                receiverAcc: '',//接收方
                content: '',//输入框数据
                time: date.toLocaleDateString()+'/'+date.toLocaleTimeString()//时间
            }
        }
    }
}
const app = Vue.createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");